<extend name="public/base" />
<block name="main-content">
    <el-card class="box-card">
        <!-- card-header -->
        <div slot="header" class="clearfix">
            <span></span>
        </div>
        <!-- card-body -->
        <a href="{:url('/' . $Think.const.CONTROLLER . '/create')}" class="btn btn-info btn-sm" role="button">
            <i class="el-icon-plus"></i> 新增
        </a>
        <el-table ref="multipleTable" 
            v-loading="loading"
            :data="tableData" 
            tooltip-effect="dark" 
            style="width: 100%"
            @selection-change="handleSelectionChange"
            @cell-click="handleCellClick"
            header-cell-class-name="bg-light"
        >
            <el-table-column type="selection" min-width="55"></el-table-column>
            <el-table-column prop="id" label="ID" min-width="80"></el-table-column>
            <el-table-column prop="title" label="角色组" min-width="100"></el-table-column>
            <el-table-column label="状态" min-width="80">
                <template v-slot="data">
                    <!--注意------------------------------------------------------
                        :active-value='1'有绑定的属性其值1是整数，
                        而active-value='1'无绑定的属性值1不管加不加引号都是字符串
                    ------------------------------------------------------------->
                    <el-switch 
                        ref="switchStatus"
                        v-model="data.row.status"
                        active-color="#13ce66" 
                        inactive-color="#ff4949"
                        :active-value='1'
                        :inactive-value='0'
                    >
                    </el-switch>
                </template>
            </el-table-column>
            <el-table-column prop="create_time" label="创建日期" min-width="150"></el-table-column>
            <el-table-column prop="update_time" label="更新日期" min-width="150"></el-table-column>
            <el-table-column label="操作" min-width="250">
                <template v-slot="data">
                    <el-button 
                        type="primary" 
                        size="mini" 
                        icon="el-icon-setting"
                        @click="handleAuth(data.row)"
                        plain
                    >权限</el-button>
                    <el-button 
                        type="info" 
                        size="mini" 
                        icon="el-icon-edit-outline"
                        @click="handleEdit(data.row)"
                        plain
                    >编辑</el-button>
                    <el-button 
                        type="danger" 
                        size="mini" 
                        icon="el-icon-delete"
                        @click="handleDelete(data.row, data.$index)"
                        plain
                    >删除</el-button>
                </template>
            </el-table-column>
        </el-table>
        <!-- /.card-body -->
    </el-card>
</block>
<block name="footer-script">
    {__block__}
    <script>
        new Vue({
            el: '#website',
            data() {
                return {
                    tableData: JSON.parse('{$authGroup}'),
                    multipleSelection: [],
                    isCollapse: false,
                    loading: false
                }
            },
            methods: {
                handleSelectionChange(val) {
                    this.multipleSelection = val;
                },
                handleCellClick(row, column, cell, event) {
                    if ('状态' === column.label) {
                        this.$message.closeAll();
                        let status = row.status;
                        this.loading = true;
                        // 当点击时状态switch先不要变化，只有当axios请求成功时才变化
                        row.status = (1 == row.status) ? 0 : 1;
                        this.axios.put('{:url("/" . $Think.const.CONTROLLER . "/' + row.id + '")}?_ajax=1', {
                            scene: 'status',
                            form : JSON.stringify({
                                status : status
                            })
                        })
                        .then(response => {
                            let data = response.data;
                            // 当成功时关闭loading并允许状态switch变化
                            this.loading = false;
                            if (1 === data.code) {
                                row.status = status;
                                this.$message( elMessageOptions(data.msg[0], 'success', 3) );
                            } else if (0 === data.code) {
                                // 当失败时关闭loading并弹出消息框
                                this.$message( elMessageOptions(data.msg) );
                            }
                        })
                        .catch(error => {
                            // 当失败时关闭loading并弹出消息框
                            this.$message( elMessageOptions( adminEditingError(error) ) );
                        })
                    }
                },
                handleEdit(row) {
                    window.location.href = `${WEB_ADMIN_PATH}${CONTROLLER}/${row.id}/edit.html`;
                },
                handleAuth(row) {
                    window.location.href = `${WEB_ADMIN_PATH}${CONTROLLER}/${row.id}/auth.html`;
                },
                handleDelete(row, index) {
                    var data;
                    let isError = false;
                    this.$msgbox(
                        elMessageBoxOptions(
                            `你确定要删除<b class="text-primary">${row.title}</b>吗？`,
                            title = '提示',
                            type = "warning",
                            (action, instance, done) => {
                                if ('confirm' === action) {
                                    console.log(row);
                                    instance.confirmButtonLoading = true;
                                    instance.confirmButtonText = '执行中...';
                                    return this.axios.delete('{:url("/" . $Think.const.CONTROLLER . "/' + row.id + '")}?_ajax=1')
                                        .then(response => {
                                            done();
                                            instance.confirmButtonLoading = false;
                                            data = response.data;
                                            isError = false;
                                        })
                                        .catch(error => {
                                            done();
                                            instance.confirmButtonLoading = false;
                                            data = error;
                                            isError = true;
                                            console.log('catch');
                                        })
                                } else {
                                    done();
                                }
                            }
                        )
                    ).then(action => {
                        if ('confirm' === action)
                        {
                            if (1 === data.code) {
                                this.tableData.splice(index, 1);
                                this.$message( elMessageOptions(data.msg[0], 'success', 3) );
                            } else if (0 === data.code) {
                                this.$message( elMessageOptions(data.msg) );
                            } else if (isError) {
                                this.$message( elMessageOptions( adminEditingError(data) ) );
                            }
                        }
                    });
                }
            }
        })
    </script>
</block>